﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CutIMG.aspx.cs" Inherits="WebSite.CutIMG" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/Jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>
    <link href="js/Jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

    <link href="js/jquery.colorbox/colorbox.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.colorbox/jquery.colorbox-min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var cutWidth = <%=CutWidth %>;
        var cutHeight = <%=CutHeight %>;

        jQuery(function ($) {
            // 注：裁剪大小为150，可替换，前后台后代都要替换。
            // Create variables (in this scope) to hold the API and image size
            var jcrop_api, boundx, boundy;


            $('#initIMG').Jcrop({
                onChange: updatePreview,
                onSelect: updatePreview,
                // aspectRatio: 1,
                // maxSize: [150,150],
                maxSize: [cutWidth, cutHeight],                
                // setSelect: [0, 0, 150, 150]
                setSelect: [0, 0, cutWidth, cutHeight]
            }, function () {
                // Use the API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                jcrop_api = this;
            });

            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    // var rx = 150 / c.w;
                    // var ry = 150 / c.h;
                    var rx = cutWidth / c.w;
                    var ry = cutHeight / c.h;

                    $('#viewIMG').css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                }
                $('#hidden_x1').val(c.x);
                $('#hidden_y1').val(c.y);
                $('#hidden_x2').val(c.x2);
                $('#hidden_y2').val(c.y2);
                $('#hidden_Iwidth').val(c.w);
                $('#hidden_Iheight').val(c.h);
            };

        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="bt_CutIMG" runat="server" Text="裁剪并保存图片" OnClick="bt_CutIMG_Click" />
        原始图片：<br />
        <asp:Image ID="initIMG" runat="server" /><br />
        最终显示效果：<br />
        <div style="width: <%=CutWidth%>px; height: <%=CutHeight%>px; overflow: hidden;">
            <asp:Image ID="viewIMG" alt="显示效果图" runat="server" />
        </div>
        <br />        
        <asp:HiddenField ID="hidden_x1" runat="server" />
        <asp:HiddenField ID="hidden_y1" runat="server" />
        <asp:HiddenField ID="hidden_x2" runat="server" />
        <asp:HiddenField ID="hidden_y2" runat="server" />
        <asp:HiddenField ID="hidden_Iwidth" runat="server" />
        <asp:HiddenField ID="hidden_Iheight" runat="server" />
    </div>
    </form>
</body>
</html>
